<template>
    <n-button @click="showModal=true" type="primary">新建项目</n-button>
    <!--添加项目模态框-->
    <n-modal
        v-model:show="showModal"
        :mask-closable="false"
        preset="dialog"
        :title="state.type==='add'?'新增项目':'修改项目'"
    >
        <n-form
            ref="formRef"
            :model="newProject"
            :rules="rules"
            label-placement="left"
            label-width="auto"
            require-mark-placement="right-hanging"
            size="medium"
            :style="{
                    maxWidth: '640px'
                }"
        >
            <n-form-item label="项目名称" path="name">
                <n-input v-model:value="newProject.name" type="text" placeholder="项目名称"/>
            </n-form-item>
            <n-form-item label="项目描述" path="describe">
                <n-input v-model:value="newProject.describe" type="textarea" placeholder="项目描述"/>
            </n-form-item>

            <!--两个按钮-->
            <div style="display: flex; justify-content: flex-end">
                <n-button @click="onNegativeClick">
                    取消
                </n-button>
                <n-button type="primary" @click="handleValidateButtonClick">
                    确定
                </n-button>
            </div>
        </n-form>

    </n-modal>
</template>

<script setup>

import {NButton} from "naive-ui";
import workApi from "@/http/workApi";
import {useSuperAdminStore} from "@/stores/superAdmin";


const superAdmin = useSuperAdminStore()
// 模态框展示
const showModal = ref(false)
// 状态  默认为新增项目
const state = reactive({
    type: 'add',
    apiMethod: 'post',
    modifiedId: null
})
// 新增项目所需信息
let newProject = ref({
    name: null,
    describe: null
})
// 恢复默认选项
let onNegativeClick = () => {
    showModal.value = false
    newProject.name = null
    newProject.describe = null
    state.type = 'add'
    state.apiMethod = 'post'
    state.modifiedId = null
}
// 验证规则
const rules = {
    name: {
        required: true,
        trigger: ['blur'],
        message: '未填'
    }
};
let addProject = () => {
    const data = {
        ...newProject.value,
        id: state.modifiedId
    }
    workApi({
        method: state.apiMethod,
        url: 'super_admin/project',
        data: data
    }).then(() => {
        superAdmin.updateTaskQuestionBank()
        onNegativeClick()
    })
}
// 执行验证
const formRef = ref(null);
const handleValidateButtonClick = (e) => {
    e.preventDefault()
    formRef.value?.validate((errors) => {
        if (!errors) {
            addProject()
        } else {
            window.$message.error('好像没有填好, 检查一下吧')
        }
    })
}
// 父组件使用修改项目
const openModifiedProject = (id, projectName, projectDescribe) => {
    newProject.value.name = projectName
    newProject.value.describe = projectDescribe
    state.modifiedId = id
    state.type = 'modified'
    state.apiMethod = 'put'
    showModal.value = true
}

defineExpose({
    openModifiedProject
})
</script>

<style scoped lang="less">
.n-button {
    margin: 15px;
}

</style>